<template>
  <div class="layout">
    <div class="mask" v-show="isBegin" @click="Controls"></div>
    <common-header :title="videoName"></common-header>
    <img src="./p_img.png" class="preview_img" v-show="!isBegin">
    <div class="loading_img" v-show="!isLoaded"></div>
    <div class="start_view" @click.stop.prevent="GoStart" v-show="!isBegin"></div>
    <div class="videobox">
      <video ref="video" x5-playsinline="true" preload="none" id="video" :poster=testImg v-show="isBegin"
             @canplay="OnPlaying"
             @timeupdate="OnPlaying" @ended="PlayEnd" @waiting="Loading" x-webkit-airplay="true"
             webkit-playsinline="true" playsinline="true" @volumechange="UpdateVolume">
        <source src="./test_video.mp4">
        Your broswer does not support the video tag.
      </video>
    </div>
    <div class="controls clearfix" v-show="!controlsIsHide">
      <div ref="switch" class="switch fl" @click="Switch"></div>
      <div class="progress fl">
        <div class="current_bar">
          <div class="tool_bar"></div>
        </div>
        <div class="total_bar"></div>
        <div ref="jumpBar" class="jump_bar"></div>
        <div class="time clearfix">
          <div class="current_time fl">{{currentTime}}</div>
          <div class="total_time fr">{{totalTime}}</div>
        </div>
      </div>
      <div class="voice_icon fr" @click="ChangeVoiceBar($event)">
        <div class="voice_bar" v-show="!isVoiceBarHide">
          <div class="total_voice_bar"></div>
          <div class="current_voice_bar">
            <div class="current_voice_toolbar"></div>
          </div>
          <div ref="jumpVoice" class="jump_voice_bar"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'

  import testImg from './test_video.jpg'

  import playUrl from '../../assets/images/preview/video_play.png'
  import pauseUrl from '../../assets/images/preview/video_pause.png'

  import voiceDefaultUrl from '../../assets/images/preview/voice_default.png'
  import voiceSilenceUrl from '../../assets/images/preview/voice_silence.png'
  import voiceLightUrl from '../../assets/images/preview/voice_light.png'

  import Header from '../subComponents/header.vue'

  import { formatTime, handleMobileType } from '../../common'

  export default {
    data () {
      return {
        videoDom: {}, // video节点对象
        videoName: 'carmole',  // 视频名字
        testImg: testImg, // 预览图片
        isBegin: false,  // 是否开始预览，为true则隐藏预览图片  显示播器
        controlsIsHide: true, // 是否隐藏控制条
        voiceDefaultUrl: 'url(' + voiceDefaultUrl + ')',  // 默认的音量图片路径
        voiceSilenceUrl: 'url(' + voiceSilenceUrl + ')',  // 静音的图片路径
        voiceLightUrl: 'url(' + voiceLightUrl + ')',  // 高亮的图片路径
        playUrl: 'url(' + playUrl + ')',  // 播放的图片路径
        pauseUrl: 'url(' + pauseUrl + ')',  // 暂停的图片路径
        isPlay: false,  // 存储视频的播放状态
        currentTime: '00:00:00',  // 存储视频的当前播放时间
        totalTime: '00:00:00',  // 存储视频的总播放时间
        isVoiceLight: false,  // 音量是否高亮
        isVoiceBarHide: true,  // 音量条是否隐藏
        isLoaded: true, // 加载是否完成，加载时显示加载动画
        mobileType: handleMobileType()
      }
    },
    components: {
      'common-header': Header
    },
    methods: {
      SetLayoutSize () {
        $('.layout').height($(window).height())
        $('.videobox').height($(window).height())
      },

      // 点击大播放图标进行播放
      GoStart () {
        this.isBegin = true
        this.Switch()
      },

      // 改变音量的图标样式以及音量条的显示和隐藏
      ChangeVoiceBar (e) {
        if (e.target !== $('.voice_icon')[0]) { return false }
        this.isVoiceLight = !this.isVoiceLight
        this.isVoiceBarHide = !this.isVoiceBarHide
        this.UpdateVolume()
      },

      UpdateVolume () {
        $('.current_voice_bar').height($('.total_voice_bar').height() * this.$refs.video.volume)

        if (!this.isVoiceLight) {
          $('.voice_icon').css({backgroundImage: this.voiceDefaultUrl})
          return
        }
        $('.voice_icon').css({
          backgroundImage: this.$refs.video.volume === 0 ? this.voiceSilenceUrl : this.voiceLightUrl
        })
      },

      // 控制视频控制条的隐藏和显示
      Controls () {
        if (this.mobileType === 1) {
          this.controlsIsHide = !this.controlsIsHide  // 如果是ios  显示控制条
          this.$refs.video.controls = false
        } else if (this.mobileType === 2) {
          this.controlsIsHide = true // 如果是安卓 不显示控制条
          this.$refs.video.controls = true
          this.$refs.video.play()
        }
      },

      // 播放时执行
      OnPlaying () {
        this.isLoaded = true

        // 设置进度条的宽度
        $('.current_bar').width($('.total_bar').width() * this.$refs.video.currentTime / this.$refs.video.duration)

        // 对时间进行格式上的处理
        this.currentTime = formatTime(this.$refs.video.currentTime, true)
        this.totalTime = formatTime(this.$refs.video.duration, true)

        this.UpdateVolume()
      },

      // 控制视频开关
      Switch () {
        this.isPlay = !this.isPlay

        if (this.isPlay) {
          $('.switch').css({backgroundImage: this.pauseUrl})

          this.$refs.video.play() // 视频播放
        } else {
          $('.switch').css({backgroundImage: this.playUrl})

          this.$refs.video.pause() // 视频暂停
        }
      },

      // 未加载完成前做的事
      Loading () {
        this.isLoaded = false
      },

      // 播放结束
      PlayEnd () {
        $('.switch').css({backgroundImage: this.playUrl})

        this.isPlay = false

        this.currentTime = formatTime(0, true)

        $('.current_bar').width(0)
      },

      // 点击以及滑动跳跃播放
      ProgressTouchFollow () {
        var e // 事件源
        var touch // 触摸对象
        var currentWidth  // 进度条宽度
        var _width  // 计算后的需要给进度条设置的宽度
        var totalWidth = 0  // 总宽度
        var startX = 0  // 触摸起始X坐标
        var startY = 0  // 触摸起始Y坐标
        var moveX = 0 // 移动时的X坐标
        var moveY = 0 // 移动时的Y坐标
        var distanceX = 0 // X方向移动的距离
        var distanceY = 0 // Y方向移动的距离
        var _this = this  // 组件实例对象
        var _left = parseInt($('.controls').css('paddingLeft')) + parseInt($('.progress').css('marginLeft')) + parseInt($('.switch').width())

        _this.$refs.jumpBar.addEventListener('touchstart', function (event) {
          e = event || window.event
          if (e.targetTouches.length !== 1) { return false }
          touch = e.targetTouches[0]
          startX = touch.pageX
          startY = touch.pageY
          currentWidth = startX - _left
          totalWidth = $('.total_bar').width()
          _this.$refs.video.currentTime = _this.$refs.video.duration * currentWidth / totalWidth
        })
        _this.$refs.jumpBar.addEventListener('touchmove', function (event) {
          e = event || window.event
          if (e.targetTouches.length !== 1) { return false }
          touch = e.targetTouches[0]
          moveX = touch.pageX
          moveY = touch.pageY
          distanceX = moveX - startX
          distanceY = moveY - startY
          if (Math.abs(distanceY) > Math.abs(distanceX)) { return false } // 在Y轴滑动 不做操作
          e.preventDefault() // 组织浏览器默认的滑动翻页
          _width = currentWidth + distanceX
          if (_width > totalWidth) {
            _width = totalWidth
          }
          if (_width < 0) {
            _width = 0
          }
          _this.$refs.video.currentTime = _this.$refs.video.duration * _width / totalWidth
        })
      },

      // 点击音量以及滑动跳跃
      VolumeTouchFollow () {
        var e, touch, currentHeight, _height, startX, startY, moveX, moveY, distanceX, distanceY
        var totalHeight = $('.total_voice_bar').height()
        var _this = this
        var _top = window.innerHeight - $('.controls').innerHeight()

        _this.$refs.jumpVoice.addEventListener('touchstart', function (event) {
          e = event || window.event
          e.preventDefault()
          if (e.targetTouches.length !== 1) { return false }
          touch = e.targetTouches[0]
          startX = touch.pageX
          startY = touch.pageY
          currentHeight = _top - startY
          if (currentHeight > totalHeight) { currentHeight = totalHeight }
          if (currentHeight < 0) { currentHeight = 0 }
          _this.$refs.video.volume = currentHeight / totalHeight
        })

        _this.$refs.jumpVoice.addEventListener('touchmove', function (event) {
          e = event || window.event
          if (e.targetTouches.length !== 1) { return false }
          touch = e.targetTouches[0]
          moveX = touch.pageX
          moveY = touch.pageY
          distanceX = moveX - startX
          distanceY = moveY - startY
          if (Math.abs(distanceX) > Math.abs(distanceY)) { return false } // 在X轴滑动不做操作
          _height = currentHeight - distanceY
          if (_height > totalHeight) { _height = totalHeight }
          if (_height < 0) { _height = 0 }
          _this.$refs.video.volume = _height / totalHeight // 滑动时只需改变对应的音量变化 继而触发音量改变监听事件 UpdateVolume()
        })
      },

      // 横竖屏
      ToggleScreen () {
        let _this = this
        $(window).on('orientationchange', function () {
          if (window.orientation === 180 || window.orientation === 0) {
            if (_this.mobileType === 1) {
              // iphone 横屏
              _this.RequestFullScreen()
            } else if (_this.mobileType === 2) {
              // andriod 竖屏
              _this.ExitFullScreen()
            }
          } else if (window.orientation === 90 || window.orientation === -90) {
            if (_this.mobileType === 1) {
              // iphone 竖屏
              _this.ExitFullScreen()
            } else if (_this.mobileType === 2) {
              // andriod 横屏
              _this.RequestFullScreen()
            }
          }
        })
      },

      // 全屏
      RequestFullScreen () {
        var _dom = this.videoDom
        if (_dom.requestFullscreen) {
          _dom.requestFullscreen()
        } else if (_dom.mozRequestFullScreen) { // firefox
          _dom.mozRequestFullScreen()
        } else if (_dom.webkitRequestFullScreen) { // chrome
          _dom.webkitRequestFullScreen()
        } else if (_dom.msRequestFullscreen) { // ie
          _dom.msRequestFullscreen()
        }
      },

      // 退出全屏
      ExitFullScreen () {
        var de = document
        if (de.exitFullScreen) {
          de.exitFullScreen()
        } else if (de.mozCancelFullScreen) {
          de.mozCancelFullScreen()
        } else if (de.webkitCancelFullScreen) {
          de.webkitCancelFullScreen()
        } else if (de.msExitFullscreen) {
          de.msExitFullscreen()
        }
      }
    },
    mounted () {
      this.SetLayoutSize()
      this.ProgressTouchFollow()
      this.VolumeTouchFollow()
      this.ToggleScreen()
    }
  }
</script>
<style scoped>
  .layout {
    background-color: #000;
    position: relative;
  }

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 999;
  }

  .videobox {
    width: 100%;
    overflow: hidden;
  }

  video {
    width: 100%;
    height: 100%;
    margin-top: -1.2rem;
  }

  .header {
    background-color: #000 !important;
  }

  .layout .preview_img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .layout .loading_img {
    width: 1.4rem;
    height: 1.4rem;
    background: url('../../assets/images/preview/preload.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 555;
    animation: ro 2s linear infinite;
  }

  @-webkit-keyframes ro {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  .layout .start_view {
    width: 1.4rem;
    height: 1.4rem;
    background: url('../../assets/images/preview/video_start_view.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 666;
  }

  /* 控制条样式 */
  .controls {
    width: 100%;
    height: 0.98rem;
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.28rem 0.26rem 0;
    z-index: 9999;
  }

  .switch {
    width: 0.33rem;
    height: 0.38rem;
    background: url('../../assets/images/preview/video_play.png') no-repeat;
    background-size: 100% 100%;
  }

  .progress {
    width: 5.29rem;
    height: 0.5rem;
    position: relative;
    margin: 0 0.26rem 0 0.46rem;
  }

  .progress .total_bar {
    width: 100%;
    height: 0.04rem;
    border-radius: 0.04rem;
    background-color: #8c8c8c;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.1rem 0;
  }

  .progress .jump_bar {
    width: 100%;
    height: 0.1rem;
    border-radius: 0.04rem;
    background-color: transparent;
    position: absolute;
    top: -0.03rem;
    left: 0;
    margin: 0.1rem 0;
    z-index: 99999;
  }

  .progress .current_bar {
    width: 0rem;
    height: 0.04rem;
    border-radius: 0.04rem;
    background-color: #5e88ff;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.1rem 0;
    z-index: 888;
  }

  .progress .current_bar .tool_bar {
    width: 0.28rem;
    height: 0.28rem;
    background: url('../../assets/images/preview/video_bar.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.12rem;
    right: -0.14rem;
  }

  .progress .time {
    position: absolute;
    left: 0;
    top: 0.24rem;
    width: 100%;
    font-size: 0.26rem;
    color: #fff;
  }

  .progress .time .total_time {
    color: #8c8c8c;
  }

  .voice_icon {
    width: 0.48rem;
    height: 0.38rem;
    background: url('../../assets/images/preview/voice_default.png') no-repeat;
    background-size: 100% 100%;
  }

  .voice_icon .voice_bar {
    width: 0.46rem;
    height: 1.92rem;
    position: absolute;
    top: -1.74rem;
    border-radius: 0.1rem;
    border: 1px solid #514f4d;
    background-color: #000;
  }

  .voice_icon .voice_bar .total_voice_bar {
    position: absolute;
    left: 50%;
    bottom: 0.18rem;
    width: 0.04rem;
    height: 1.54rem;
    background-color: #808080;
    border-radius: 0.04rem;
    transform: translateX(-50%);
  }

  .voice_icon .voice_bar .current_voice_bar {
    position: absolute;
    left: 50%;
    bottom: 0.18rem;
    width: 0.04rem;
    height: 1rem;
    background-color: #5e88ff;
    border-radius: 0.04rem;
    transform: translateX(-50%);
    z-index: 888;
  }

  .voice_icon .voice_bar .current_voice_bar .current_voice_toolbar {
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    top: -0.1rem;
    left: -0.08rem;
    background: url('../../assets/images/sprite.png') no-repeat -4.84rem -1.6rem;
    background-size: 10rem 6rem;
  }

  .voice_icon .voice_bar .jump_voice_bar {
    position: absolute;
    left: 50%;
    bottom: 0.18rem;
    width: 0.2rem;
    height: 1.54rem;
    background-color: transparent;
    border-radius: 0.04rem;
    transform: translateX(-50%);
    z-index: 999;
  }
</style>
